<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3库合一演示</title>
  <!-- 引入jquery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <!-- 引入fullpage -->
  <script type="text/javascript" src="../dist/fullpage.js"></script>
  <link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />
  <!-- 引入echarts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js" integrity="sha256-EJb5T/UXVVwHY/BJ33bAFqyyzsAqdl4ZCElh3UYvaLk=" crossorigin="anonymous"></script>
</head>
<body>
  
<!-- 使用fullpage建立演示框架 -->

<div id="fullpage">
	<div class="section active" id="section0">
    <p>页面1</p>
    <div id="main" style="height:90%;"></div>

  </div>
	<div class="section" id="section1">
    <p>页面2</p>  
    <div id="container" style="height: 90%"></div> 
	</div>

</div>
<script type="text/javascript">
	var myFullpage = new fullpage('#fullpage', {
		sectionsColor: ['#f2f2f2', '#f2f2f2']
	});
</script>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option1 = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
    </script>
    <script type="text/javascript">
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var app = {};
      
      var option;
      
      
      
      $.get(
        'life-expectancy-table.json',
        function (_rawData) {
          run(_rawData);
        }
      );
      function run(_rawData) {
        // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
        const countries = [
          'Finland',
          'France',
          'Germany',
          'Iceland',
          'Norway',
          'Poland',
          'Russia',
          'United Kingdom'
        ];
        const datasetWithFilters = [];
        const seriesList = [];
        echarts.util.each(countries, function (country) {
          var datasetId = 'dataset_' + country;
          datasetWithFilters.push({
            id: datasetId,
            fromDatasetId: 'dataset_raw',
            transform: {
              type: 'filter',
              config: {
                and: [
                  { dimension: 'Year', gte: 1950 },
                  { dimension: 'Country', '=': country }
                ]
              }
            }
          });
          seriesList.push({
            type: 'line',
            datasetId: datasetId,
            showSymbol: false,
            name: country,
            endLabel: {
              show: true,
              formatter: function (params) {
                return params.value[3] + ': ' + params.value[0];
              }
            },
            labelLayout: {
              moveOverlap: 'shiftY'
            },
            emphasis: {
              focus: 'series'
            },
            encode: {
              x: 'Year',
              y: 'Income',
              label: ['Country', 'Income'],
              itemName: 'Year',
              tooltip: ['Income']
            }
          });
        });
        option = {
          animationDuration: 10000,
          dataset: [
            {
              id: 'dataset_raw',
              source: _rawData
            },
            ...datasetWithFilters
          ],
          title: {
            text: 'Income of Germany and France since 1950'
          },
          tooltip: {
            order: 'valueDesc',
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            nameLocation: 'middle'
          },
          yAxis: {
            name: 'Income'
          },
          grid: {
            right: 140
          },
          series: seriesList
        };
        myChart.setOption(option);
      }
      
      if (option && typeof option === 'object') {
          myChart.setOption(option);
      }
      
    </script>
</body>
</html>
